<template>
  <div class="introduction">
    <van-swipe
      :show-indicators="false"
      class="my-swipe"
      :autoplay="0"
      indicator-color="white"
      :loop="false"
      @change="onChange"
    >
      <!-- <van-swipe-item v-for="(item, i) in list" :key="i">
        <van-image fit="cover" width="100%" height="100%" :src="item" />
      </van-swipe-item> -->
      <van-swipe-item>
        <van-image
          fit="cover"
          width="100%"
          height="100%"
          :src="welcomePNGRef"
          @click="onStart"
        />
      </van-swipe-item>
    </van-swipe>

    <div v-show="index === 0" class="buttom">
      <!-- <van-button
        type="primary"
        round
        block
        style="width: 94%; margin: 0 auto"
        @click="onStart"
      >
        开启心智之旅
      </van-button> -->
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import welcomePNG from './welcome.png'
import png1 from './1.png'
import png2 from './2.png'
import png3 from './3.png'
import png4 from './4.png'

export default defineComponent({
  components: {},
  setup() {
    const router = useRouter()

    const index = ref(0)

    const list = [png1, png2, png3, png4]

    return {
      list,
      welcomePNGRef: ref(welcomePNG),
      index,
      onChange(i) {
        index.value = i
      },
      onStart() {
        router.push({
          name: 'Home',
        })
      },
    }
  },
})
</script>

<style lang="less" scoped>
.my-swipe {
  height: 100vh;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}

.buttom {
  position: fixed;
  bottom: 3px;
  left: 0;
  right: 0;
  font-weight: 700;
}
</style>
